import {deepFullCopy, messages} from "share/common";
import React, { Component } from 'react'
import { Select, Tag, Dropdown, Icon, Menu } from 'antd'
import 'styles/expense-report/components/invoice-filter.scss'

const { Option } = Select;
const { CheckableTag } = Tag;

class SlideDocumentApplicantDetail extends Component {

  state = {
    filter: {
      includeLabel: true,
      label: []
    },
    invoiceLabels: [],
  };

  componentDidMount() {
    this.getInvoiceLabels(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.getInvoiceLabels(nextProps);
  }

  getInvoiceLabels = props => {
    const { dataSource, filter } = props;
    let invoiceLabels = [];
    let copyFilter = deepFullCopy(filter);
    dataSource.map(invoice => {
      let labels = invoice.invoiceView && invoice.invoiceView.invoiceLabels;
      labels && labels.map(label => {
        if(!invoiceLabels.find(l => l.type === label.type)) {
          invoiceLabels.push({
            name: label.name,
            type: label.type,
            level: label.level
          })
        }
      })
    });
    // 处理费用删除后标签消失导致无法查看其它费用的情况
    let filterLabel = [];
    copyFilter.label.map(label => {
      if (invoiceLabels.some(item => item.type === label)) {
        filterLabel.push(label);
      }
    })
    copyFilter.label = filterLabel;
    if (filter.label.toString() !== copyFilter.label.toString()) {
      this.props.filterData(copyFilter);
    }
    this.setState({ invoiceLabels, filter: copyFilter });
  };

  onChangeFilter = (key, value) => {
    let { filter } = this.state;
    filter[key] = value;
    this.setState({ filter });
    this.props.filterData(filter);
  };

  onChangeTag = (checked, type) => {
    const { filter } = this.state;
    if(checked)
      filter.label.push(type);
    else
      filter.label.delete(type);
    this.setState({ filter });
    this.props.filterData(filter);
  };

  renderFilterMenu = (
    <Menu onClick={e => this.onChangeFilter('includeLabel', JSON.parse(e.key))}>
      <Menu.Item key={true}>{messages('expense-1.key421')/*标签包含*/}</Menu.Item>
      <Menu.Item key={false}>{messages('expense-1.key422')/*标签不包含*/}</Menu.Item>
    </Menu>
  );

  render() {
    const { invoiceLabels, filter } = this.state;
    return (
      <div className="invoice-filter">
        {invoiceLabels.length > 0 && (
          <div className='invoice-label-filter'>
            <Dropdown overlay={this.renderFilterMenu}>
              <span>
                {filter.includeLabel ?
                  messages('expense-1.key421')/*标签包含*/ :
                  messages('expense-1.key422')/*标签不包含*/}
                <Icon type="down" style={{ margin: '0 10px 0 5px' }}/>
              </span>
            </Dropdown>
            {invoiceLabels.map(label => (
              <CheckableTag
                checked={filter.label.indexOf(label.type) > -1}
                onChange={checked => this.onChangeTag(checked, label.type)}
              >
                {label.name}
              </CheckableTag>
            ))}
          </div>
        )}
      </div>
    )
  }

}

export default SlideDocumentApplicantDetail;
